<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="div1">
    <input type="text" v-model="msg">
    <div >
        {{get}}
    </div>
    <div>
        {{set}}
    </div>
</div>
<script>
    var vm= new Vue({
        el:"#div1",
        data:{
            msg:'welcom to itamy',
            msg1:'',
            msg2:''
        },
        beforeCreate:function () {
            console.log("beforeCreate 页面创建前"+this.msg)
        },
        created:function () {
            console.log("created 页面被创建"+this.msg)
        },
        beforeMount:function () {
            console.log("beforeMount 数据加载前"+this.msg)
        },
        mounted:function () {
            console.log("mounted 数据加载后" +this.msg)
        },
        beforeUpdate:function () {
            console.log("beforeUpdate 修改前"+this.msg)
        },
        updated:function () {
            console.log("update 修改后"+this.msg)
        },
        computed:{
            get(){
                this.msg1 = this.msg;
                return this.msg1;
            },
            set(){
                this.msg2 =this.msg+"嘤嘤嘤";
                return this.msg2;
            }
        },

    });

</script>
</body>

</html>